<!DOCTYPE html>
<html>
<head>
    <title>{$category.seo_title}</title>
    <meta name="keywords" content="{$category.seo_keywords}"/>
    <meta name="description" content="{$category.seo_description}">
    <include file="public@head"/>
    <link href="__TMPL__/public/assets/css/slippry/slippry.css" rel="stylesheet">
    <style>
        .caption-wraper {
            position: absolute;
            left: 50%;
            bottom: 2em;
        }

        .caption-wraper .caption {
            position: relative;
            left: -50%;
            background-color: rgba(0, 0, 0, 0.54);
            padding: 0.4em 1em;
            color: #fff;
            -webkit-border-radius: 1.2em;
            -moz-border-radius: 1.2em;
            -ms-border-radius: 1.2em;
            -o-border-radius: 1.2em;
            border-radius: 1.2em;
        }

        .tc-gridbox {
            margin: 0;
        }

        @media (max-width: 767px) {
            .caption-wraper {
                left: 0;
                bottom: 0.4em;
            }

            .caption-wraper .caption {
                left: 0;
                padding: 0.2em 0.4em;
                font-size: 0.92em;
                -webkit-border-radius: 0;
                -moz-border-radius: 0;
                -ms-border-radius: 0;
                -o-border-radius: 0;
                border-radius: 0;
            }
        }

    </style>
    <hook name="before_head_end"/>
</head>
<body class="body-white" style="position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top:0;
">
<if condition="$category.parent_id==0">
    <include file="public@navTop"/>
    <else/>
    <include file="public@nav"/>
</if>

<div>
    <ul id="home-slider" class="list-unstyled">
        <slides id="$category['list_order']">
            <li>
                <a>
                    <div style="height: 550px;width: 100%;background:url('{:cmf_get_image_url($vo.image)}') center;background-size:100% auto;">

                    </div>
                </a>
            </li>
        </slides>
    </ul>
</div>
<php>
    $where=[
    'post.create_time'=>['egt',0]
    ];
    $page=[
    'list_rows'=>10,
    'next'=>'下一页',
    'prev'=>'上一页'
    ];
</php>
<div class="list-body">
    <ul>
        <portal:articles item="vo" where="$where" order="post.create_time ASC" page="$page"
                         relation="categories"
                         categoryIds="$category.id"
                         returnVarName="articles_data">
            <li class="pay-item">
                <div class="item-img" style="background-image: url('{:cmf_get_image_url($vo.more.thumbnail)}')">

                </div>
                <div class="item-name">
                    <div style="float:left;margin-left: 30px;">{$vo.post_title}</div>
                </div>
            </li>
        </portal:articles>
    </ul>
</div>
<div class="code" id="code">
    <div id="qrcode"></div>
    <div style="color: #ffffff;margin-top: 10px">微信扫码报名</div>
</div>
<include file="public@footer"/>
<style>
    .footer {
        display: block;
        animation-name: footerInAn;
        position: relative;
    }

    .footer-link {
        height: 40px;
    }

    .footer-link .code-img {
        bottom: 0;
    }

    #topNav {
        animation-name: topNavInAn;
    }

    .list-body li {
        border: solid 1px #6083c3;
        border-radius: 10px;
        width: auto;
        overflow: hidden;
        background-color: #ffffff;
        margin: 10px 36px;
    }

    .list-body li:hover {
        transform: scale(1);
    }

    .item-img {
        box-shadow: none;
        background-repeat: no-repeat;
    }

    .list-body li:hover .item-img {
        background-position: bottom;
        box-shadow: none;
    }

    .item-img:hover {
        box-shadow: none;
    }

    .baoming {
        border: solid #00a0e9 1px;
        border-radius: 15px;
        padding: 5px 20px;
        margin-top: -5px;
        color: #00a0e9;
        cursor: pointer;
        font-size: 16px;
    }

    .baoming:hover {
        background: #00a0e9;
        color: #fffFFF;
    }

    .code {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 10000;
        display: none;
        padding: 30px;
    }

</style>
<!-- /container -->
<include file="public@scripts"/>
<script src="__TMPL__/public/assets/js/slippry.min.js"></script>
<script>
    $(function () {
        var trans = ['fade', 'horizontal', 'vertical']
        var tran = trans[Math.floor(Math.random() * 2 + 1)]
        $(".list-unstyled").slippry({
            transition: tran,
            useCSS: true,
            captions: false,
            speed: 1000,
            pause: 2000,
            auto: true,
            preload: 'visible',
            controls: true
        });
        $(".list-unstyled").show();
    });
</script>
<hook name="before_body_end"/>
</body>
</html>
